
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>留言板-学并思</title>
    <link href="./template/css/bootstrap.min.css" rel="stylesheet">
    <link href="./template/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    
  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">留言板</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">留言板</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>

          <?php if (isset($_SESSION['nickname'])): ?>

          <div class="navbar-form navbar-right">
            <a class="btn btn-success"><?php echo $_SESSION['nickname'] ?></a>
            <a href="./loginout.php" class="btn btn-success">退出</a>
          </div>

          <?php else: ?>


          <div class="navbar-form navbar-right">
            <a href="./login.php" class="btn btn-success">登录</a>
            <a href="./reg.php" class="btn btn-success">注册</a>
          </div>

          <?php endif ?>


        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container theme-showcase" role="main">	
    	<style type="text/css">
    		
    		.action{
    			position: absolute;
    			top: 10px;
    			right: 20px;
    			color: red;
    		}
    		.action .glyphicon-pencil{
    			color: #2F70A8;
    			margin-right: 10px;
    		}
    		.action .glyphicon-remove{
    			color: red;
    		}
        .col-md-6{
          overflow: hidden;
        }
    	</style>

      


      <div class="page-header">
        <h1></h1>
      </div>
      <div class="row" id="msglist">
        <?php foreach ($data as $k => $v): ?>
        <div class="col-md-6">
          <div class="panel panel-success">
            <div class="panel-heading">
              <h3 class="panel-title"><img width="40px" src="<?php echo $v['img']; ?>"><?php echo $v['nickname']; ?>(<?php echo Ftime($v['ctime']); ?>)</h3>
              <div class="action">
              	<a href="edit.php?k=<?php echo $k; ?>">
              		<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
              	</a>
              	
              	<a href="del.php?k=<?php echo $k; ?>"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
              	
              </div>
            </div>
            <div class="panel-body">
              <?php echo $v['content']; ?>
            </div>
          </div>
        </div>
        <?php endforeach ?>
      </div>
      <div style="text-align: center;" class="row">
          <span  class="btn-try btn btn-success btn-lg get-more">加载更多</span>
      </div>
      <nav aria-label="Page navigation">
        <ul class="pagination">

          <?php if($p!=1){ ?>
          <li>
            <a href="./index.php?p=<?php echo $p-1; ?>" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <?php } ?>


          <?php 

          if($p<3){
            $start = 1;
            $end = 5;
          }elseif($p>$pages-2){
            $start = $pages-4;
            $end = $pages;
          }else{
            $start = $p-2;
            $end = $p+2;
          }

           ?>


          <?php for($i =$start ; $i<=$end;$i++){ ?>

                <li class="<?php if($p==$i){ echo 'active'; } ?>"><a href="./index.php?p=<?php echo $i; ?>"><?php echo $i; ?></a></li>

          <?php } ?>

           <?php if($pages!=$p){ ?>

            <li>
              <a href="./index.php?p=<?php echo $p+1; ?>" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>

          <?php } ?>
          <li>
            <form style="display: inline-block;">
              <input type="text" class="form-control" id="exampleInputName2" name="p" placeholder="<?php echo $p; ?>" style="display: inline-block;width: 50px;">
            <button type="submit" class="btn btn-primary">跳转</button>
            </form>
          </li>

        </ul>
      </nav>
      <div class="row">
      	<form action="./add.php" method="post" enctype="multipart/form-data" class="form-inline">
		  <div class="form-group">
		    <!-- 
        <input type="file" class="form-control" name="file" > -->
        <input type="text" class="form-control" name="code" >
        <img src="./code.php" data-src="./code.php" id="code" width="120px">
		  </div>
		  
		  <button type="submit" class="btn btn-primary">留言</button>

		  <textarea name="content" style="width: 100%;margin-top: 10px;" class="form-control" rows="3"></textarea>
		</form>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $(function () {
        $('#code').click(function(){

            src = $(this).attr('data-src')

            $(this).attr('src',src+"?id="+Math.random())
        })
        p =1;
        $('.get-more').click(function(){
           p++;

           $.ajax({
             url: './getmore.php',
             type: 'POST',
             dataType: 'json',
             data: {p: p},
           })
           .done(function(res) {
             if(res.error==1){
                alert(res.data)
             }else{
                // $('#msglist')
                msg_list = res.data;

                for (var i in msg_list) {
                    str = '<div class="col-md-6"><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title"><img width="40px" src="'+msg_list[i].img+'">'+msg_list[i].nickname+'('+msg_list[i].ctime+')</h3><div class="action"><a href="edit.php?k='+i+'"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a><a href="del.php?k='+i+'"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></div></div><div class="panel-body">'+msg_list[i].content+'</div></div></div>';
                    $('#msglist').append(str);
                }

             }
           })
           .fail(function() {
             console.log("error");
           })
           
        })
    })
  </script>
</html>
